// 显示主内容
function showContent(contentId) {
  // 移除所有菜单项的active类
  document.querySelectorAll(".nav-item").forEach((item) => {
    item.classList.remove("active");
  });

  // 给当前点击的菜单项添加active类
  event.currentTarget.classList.add("active");

  // 根据选择的菜单显示不同内容
  const contentArea = document.getElementById("content-area");

  if (contentId === "match-management") {
    contentArea.innerHTML = `
        <div class="match-management">
          <div class="factions-container">
            <div class="faction-column">
              <div class="faction-header">阵营A (美军机械化)</div>
              
              <div class="squads-container">
                <div class="squads-scroll">
                  <div class="squads-grid">
                    <div class="squad-card">
                      <div class="squad-header">
                        <div class="squad-name">Alpha 小队</div>
                        <div class="squad-meta">
                          <span>队长: [TAG]PlayerOne</span>
                          <span>建队: 12:05</span>
                        </div>
                      </div>
                      <div class="member-list">
                        <div class="member-item" onclick="showPlayerModal('[TAG]PlayerOne')">
                          <div class="role-icon role-squadleader"></div>
                          <div class="member-name">[TAG]PlayerOne</div>
                        </div>
                        <div class="member-item" onclick="showPlayerModal('Rifleman_99')">
                          <div class="role-icon role-rifleman"></div>
                          <div class="member-name">Rifleman_99</div>
                        </div>
                        <div class="member-item" onclick="showPlayerModal('Medic_Alpha')">
                          <div class="role-icon role-medic"></div>
                          <div class="member-name">Medic_Alpha</div>
                        </div>
                      </div>
                    </div>
                    
                    <div class="squad-card">
                      <div class="squad-header">
                        <div class="squad-name">Bravo 小队</div>
                        <div class="squad-meta">
                          <span>队长: TankCommander</span>
                          <span>建队: 12:15</span>
                        </div>
                      </div>
                      <div class="member-list">
                        <div class="member-item" onclick="showPlayerModal('TankCommander')">
                          <div class="role-icon role-squadleader"></div>
                          <div class="member-name">TankCommander</div>
                        </div>
                        <div class="member-item" onclick="showPlayerModal('GunnerPro')">
                          <div class="role-icon role-engineer"></div>
                          <div class="member-name">GunnerPro</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="unassigned-section">
                <div class="unassigned-header">未分配玩家 (3人)</div>
                <div class="unassigned-players">
                  <div class="player-tag" data-role="squadleader" onclick="showPlayerModal('US_SoloPlayer1')">
                    US_SoloPlayer1
                  </div>
                  <div class="player-tag" data-role="rifleman" onclick="showPlayerModal('US_SoloPlayer2')">
                    US_SoloPlayer2
                  </div>
                  <div class="player-tag" data-role="medic" onclick="showPlayerModal('US_SoloPlayer3')">
                    US_SoloPlayer3
                  </div>
                </div>
              </div>
            </div>
            
            <div class="faction-column">
              <div class="faction-header">阵营B (俄军)</div>
              
              <div class="squads-container">
                <div class="squads-scroll">
                  <div class="squads-grid">
                    <div class="squad-card">
                      <div class="squad-header">
                        <div class="squad-name">伏特加小队</div>
                        <div class="squad-meta">
                          <span>队长: [RU]SquadLead</span>
                          <span>建队: 12:10</span>
                        </div>
                      </div>
                      <div class="member-list">
                        <div class="member-item" onclick="showPlayerModal('[RU]SquadLead')">
                          <div class="role-icon role-squadleader"></div>
                          <div class="member-name">[RU]SquadLead</div>
                        </div>
                        <div class="member-item" onclick="showPlayerModal('Medic_RU')">
                          <div class="role-icon role-medic"></div>
                          <div class="member-name">Medic_RU</div>
                        </div>
                      </div>
                    </div>
                    
                    <div class="squad-card">
                      <div class="squad-header">
                        <div class="squad-name">装甲小队</div>
                        <div class="squad-meta">
                          <span>队长: [RU]TankLeader</span>
                          <span>建站: 12:20</span>
                        </div>
                      </div>
                      <div class="member-list">
                        <div class="member-item" onclick="showPlayerModal('[RU]TankLeader')">
                          <div class="role-icon role-squadleader"></div>
                          <div class="member-name">[RU]TankLeader</div>
                        </div>
                        <div class="member-item" onclick="showPlayerModal('[RU]Gunner1')">
                          <div class="role-icon role-engineer"></div>
                          <div class="member-name">[RU]Gunner1</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="unassigned-section">
                <div class="unassigned-header">未分配玩家 (4人)</div>
                <div class="unassigned-players">
                  <div class="player-tag" data-role="rifleman" onclick="showPlayerModal('RU_SoloPlayer1')">
                    RU_SoloPlayer1
                  </div>
                  <div class="player-tag" data-role="medic" onclick="showPlayerModal('RU_SoloPlayer2')">
                    RU_SoloPlayer2
                  </div>
                  <div class="player-tag" data-role="engineer" onclick="showPlayerModal('RU_SoloPlayer3')">
                    RU_SoloPlayer3
                  </div>
                  <div class="player-tag" data-role="rifleman" onclick="showPlayerModal('RU_SoloPlayer4')">
                    RU_SoloPlayer4
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
  } else {
    contentArea.innerHTML =
      '<div class="construction-message">页面正在建设中</div>';
  }
}

// 显示子内容
function showSubContent(subContentId) {
  // 阻止事件冒泡，避免触发父级的showContent
  event.stopPropagation();

  // 显示建设中提示
  document.getElementById("content-area").innerHTML =
    '<div class="construction-message">页面正在建设中</div>';
}

// 显示玩家信息弹窗
function showPlayerModal(playerName) {
  // 阻止事件冒泡
  event.stopPropagation();

  const modalHTML = `
    <div class="modal-overlay" onclick="closeModal()">
      <div class="player-modal" onclick="event.stopPropagation()">
        <div class="modal-header">
          <div class="header-title">玩家详细信息</div>
        </div>
        <div class="modal-body">
          <div class="player-main-info">
            <div class="player-info-section">
              <div class="player-header-info">
                <div class="player-avatar"></div>
                <div class="player-name">${playerName}</div>
                <div class="player-steamid">
                  76561198123456789
                  <button class="copy-btn-icon" onclick="copyToClipboard('76561198123456789')" title="复制SteamID">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                      <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                    </svg>
                  </button>
                </div>
              </div>
              
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">进入时间:</div>
                  <div class="info-value">2023-06-15 11:30:45</div>
                </div>
                <div class="info-item">
                  <div class="info-label">游戏总时长:</div>
                  <div class="info-value">${
                    Math.floor(Math.random() * 100) + 50
                  } 小时</div>
                </div>
                <div class="info-item">
                  <div class="info-label">当局时长:</div>
                  <div class="info-value">2小时15分钟</div>
                </div>
              </div>
              
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-label">击杀</div>
                  <div class="stat-value">3</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">死亡</div>
                  <div class="stat-value">2</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">总K/D</div>
                  <div class="stat-value">1.5</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">误伤友军人数</div>
                  <div class="stat-value">10</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">本服个人胜率</div>
                  <div class="stat-value">27.3%</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">救援</div>
                  <div class="stat-value">1</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">单位时间击杀（r/min）</div>
                  <div class="stat-value">1.3</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">平均存活时间（min/次）</div>
                  <div class="stat-value">2</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">被友军累计误伤（HP）</div>
                  <div class="stat-value">283</div>
                </div>
              </div>
            </div>
            
            <div class="killfeed-section">
              <div class="killfeed-controls">
                <div class="filter-btns">
                  <button class="filter-btn active" data-filter="all">全部记录</button>
                  <button class="filter-btn" data-filter="kills">击杀记录</button>
                  <button class="filter-btn" data-filter="deaths">死亡记录</button>
                  <button class="filter-btn" data-filter="other">其他记录</button>
                </div>
              </div>
              <div class="killfeed-list">
                <table class="killfeed-table">
                  <thead>
                    <tr>
                      <th width="80px">时间</th>
                      <th width="100px">玩家</th>
                      <th width="60px">动作</th>
                      <th width="100px">目标</th>
                      <th width="80px">伤害/分</th>
                      <th width="100px">武器/方式</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="kill">
                      <td>12:15:23</td>
                      <td>${playerName}</td>
                      <td>击杀</td>
                      <td>[RU]EnemyPlayer</td>
                      <td class="damage">87</td>
                      <td class="weapon">M4A1</td>
                    </tr>
                    <tr class="death">
                      <td>12:20:45</td>
                      <td>[RU]Sniper</td>
                      <td>击杀</td>
                      <td>${playerName}</td>
                      <td class="damage">100</td>
                      <td class="weapon">SVD</td>
                    </tr>
                    <tr class="construction">
                      <td>12:25:10</td>
                      <td>${playerName}</td>
                      <td>建造</td>
                      <td>沙袋工事</td>
                      <td class="damage">25</td>
                      <td class="weapon">工兵铲</td>
                    </tr>
                    <tr class="revive">
                      <td>12:30:22</td>
                      <td>${playerName}</td>
                      <td>救援</td>
                      <td>队友Alpha</td>
                      <td class="damage">50</td>
                      <td class="weapon">医疗包</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="footer-btn steam-btn" onclick="viewSteamProfile('76561198123456789')">Steam资料</button>
          <button class="footer-btn switch-btn" onclick="switchTeam('${playerName}')">切换阵营</button>
          <button class="footer-btn kick-btn" onclick="quickKick('${playerName}')">踢出</button>
          <button class="footer-btn warn-btn" onclick="showPenaltyDialog('${playerName}')">处罚</button>
          <button class="footer-btn chat-btn" onclick="openChatWith('${playerName}')">聊天</button>
        </div>
      </div>
    </div>
  `;

  document.body.insertAdjacentHTML("beforeend", modalHTML);
}

// 复制到剪贴板
function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    alert("SteamID已复制到剪贴板");
  });
}

// 关闭弹窗
function closeModal() {
  const modal = document.querySelector(".modal-overlay");
  if (modal) {
    modal.remove();
  }
}
